<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a { color: red;}
    </style>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
        
    
</head>
<body>
    <!-- 
    路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，
    如果点击页面上的about 按钮，页面中就要显示about 的内容。
    Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 
    所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 

    类似于链接：<a href="abc.html">我们要跳转的页面</a>

    在vue中使用路由一定要引用库：

    -->

   
    <div id="box">
        <p>
            <!-- 我们可以使用router-link组件来进行导航 -->
            <!-- 通过传入to属性指定链接 -->
            <!-- router-link 默认就会渲染成一个a标签 -->
           <router-link to="/home">{{home}}</router-link>
           <router-link to='/news'>{{news}}</router-link>
        </p>
        <!-- 定义一个路由的出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view ></router-view>
    </div>
     

    <script>
        //1.定义路由组件
        const Home={template:"<div>首页</div>"}
        const News={template:"<div>新闻</div>"}

        //2.定义路由
        //每个路由应该映射为一个组件
       const routers=[
           {
               path:"/home",component:Home
           },
           {
               path:"/news",component:News
           }
       ]

        //3.创建一个router的实例(对象)，然后将上面定义的路由routes进行配制
           const router = new VueRouter({
              routers
           })

        // 4.创建和挂载根实例
        // 我们要通过router配置参数注入路由，从而让整个应用都有路由的功能
       
           var vm = new Vue({
               el:"#box",
               data:{
                   home:"home",
                   news:"news"
               },
               router
           })
    </script>
</body>
</html>